<!--
 * @Description: File Description
 * @Author: jundie.cheng@hand-china.com
 * @version: H3.0
 * @Date: 2023-03-29 09:48:59
 * @LastEditTime: 2023-03-29 09:50:50
-->
<template>
  <PageLayout full>
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('BIWD.WaterInfo.Navigate.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="water-info-content">
      <view class="tds-original">
        <view class="tds-title">{{ $t('BIWD.WaterInfo.TdsPureWater.Text') }}</view>
        <text class="tds-number filter-last">{{ control?.store.TdsPureWater }}</text>
      </view>
      <view class="tds-format">
        <view class="tds-title">{{ $t('BIWD.WaterInfo.TdsRawWater.Text') }}</view>
        <text class="tds-number filter-pre">{{ control?.store.TdsRawWater }}</text>
      </view>
      <view class="tds-des">
        <text>{{ $t('BIWD.WaterInfo.Tds.Des.Black.Text') }}</text>
        <text class="des-color">{{ $t('BIWD.WaterInfo.Tds.Des.Blue.Text') }}</text>
      </view>
      <view class="info-box">
        <view class="content">
          <view class="content-title">
            <text>{{ $t('BIWD.WaterInfo.UV.Label') }}</text>
            <image class="tips-icon" src="/static/ic_tips_icon.png" @click="UVTipsPop(true)"></image>
          </view>
          <view class="content-number">{{ $t('BIWD.WaterInfo.ContinuousEscort.Label') }}</view>
        </view>
        <view class="content">
          <view class="content-title">{{ $t('BIWD.WaterInfo.MachineFilterVolume.Label') }}</view>
          <view class="content-number"
            >{{ control?.store.machineFilterVolume
            }}<text class="unit">{{ $t('BIWD.WaterInfo.MachineFilterVolume.Unit.Text') }}</text></view
          >
        </view>
        <view class="content">
          <view class="content-title">{{ $t('BIWD.WaterInfo.machineUseTime.Label') }}</view>
          <view class="content-number"
            >{{ control?.store.machineUseTime
            }}<text class="unit">{{ $t('BIWD.WaterInfo.machineUseTime.Unit.Text') }}</text></view
          >
        </view>
      </view>

      <view class="info-box" v-if="isShowProductVolume">
        <view class="content">
          <view class="content-title">总出水量</view>
          <view class="content-number"
            >{{ control?.store.productVolume
            }}<text class="unit">{{ $t('BIWD.WaterInfo.MachineFilterVolume.Unit.Text') }}</text></view
          >
        </view>
      </view>
    </view>
    <Modal
      :visible="showRCImg"
      :title="$t('BIWD.WaterInfo.UV.Dialog.Title')"
      :ok-text="$t('BIWD.WaterInfo.UV.Dialog.Confirm.Text')"
      @ok="UVTipsPop(false)"
    >
      <view class="uv-content">
        <image class="uv-img" :src="imgUrl" mode="widthFix"></image>
        <view class="uv-des"> {{ $t('BIWD.WaterInfo.UV.Dialog.Content.Text') }} </view>
      </view>
    </Modal>
  </PageLayout>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import Modal from '@/common/modal.vue'

import netconfig from '@/config/netconfig'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { useEventReceiver } from '@/utils/mpHelper'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'

const headerStyle = {
  backgroundColor: '#fff',
}
const control = ref<BaseController.Control | null>(null)
useEventReceiver('control', (received: BaseController.Control) => {
  control.value = received
})
const imgUrl = netconfig.ASSETSPRE_ICONS + 'img_BIWD_UV.png'

const isShowProductVolume = netconfig.isTester

/**
 * uv抑菌
 */
const showRCImg = ref(false)
function UVTipsPop(value: boolean) {
  safeTrack(() => {
    trackEvent('BIWD.WaterInfo.UV.Label', {}, TrackType.ApplianceDetail)
  })
  showRCImg.value = value
}
</script>
<style scoped lang="less">
.water-info-content {
  padding: 40rpx 32rpx 0;
  font-family: 'PingFang SC';
  font-style: normal;
  .tds-original {
    display: flex;
    font-weight: 500;
    font-size: 48rpx;
    line-height: 68rpx;
    color: var(--dark-color);
    padding-left: 12rpx;
  }
  .filter-last {
    font-size: 72rpx;
  }
  .tds-number {
    margin-left: 36rpx;
  }
  .tds-format {
    display: flex;
    font-weight: 400;
    font-size: 32rpx;
    color: var(--dark-color);
    opacity: 0.8;
    margin-top: 16rpx;
    padding-left: 12rpx;
  }
  .tds-des {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 48rpx;
    margin-top: 42rpx;
    .des-color {
      color: var(--primary-color);
    }
    padding-left: 12rpx;
  }
  .info-box {
    height: 188rpx;
    background-color: #f4f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 36rpx;
    box-sizing: border-box;
    margin-top: 64rpx;
    text-align: center;
    .content-title {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 40rpx;
      color: var(--dark-color);
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      .tips-icon {
        width: 30rpx;
        height: 30rpx;
        margin-left: 6rpx;
      }
    }
    .content-number {
      font-weight: 500;
      font-size: 40rpx;
      color: var(--dark-color);
      margin-top: 30rpx;
      .unit {
        font-size: 28rpx;
        padding-left: 8rpx;
      }
    }
  }
}
.uv-content {
  .uv-img {
    width: 540rpx;
  }
  .uv-des {
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #121e48;
    text-align: center;
    font-weight: 400;
    margin-top: 20rpx;
  }
}
</style>
